<section class="code-box-demo" [style]="{ background: item.bg }">
  <div [class.browser-mockup]="item.browser" [style]="{ height: item.browser + 'px' }">
    <div [class.browser-scroll]="item.browser">
      <ng-content />
    </div>
  </div>
</section>
<section class="code-box-meta markdown">
  @if (type === 'default') {
    <div class="code-box-title">
      {{ item.title }}
      <edit-button [item]="item" />
    </div>
    <div class="code-box-description" [innerHTML]="item.summary"></div>
  }
  <div class="code-box-actions">
    @if (false) {
      <nz-icon
        nz-tooltip
        [nzTooltipTitle]="codeSandboxTpl"
        (click)="openOnlineIDE('CodeSandbox', true)"
        nzType="code-sandbox"
        class="code-box-code-icon"
      />
      <ng-template #codeSandboxTpl>
        {{ 'app.demo.code-sandbox' | i18n }}
        @if (false) {
          (
          <a (click)="openOnlineIDE('CodeSandbox', true)">{{ 'app.demo.code-sandbox-cli' | i18n }}</a>
          )
        }
      </ng-template>
    }
    <nz-icon
      nz-tooltip
      [nzTooltipTitle]="stackblitzTpl"
      (click)="openOnlineIDE()"
      nzType="thunderbolt"
      nzTheme="fill"
      class="code-box-code-icon"
    />
    <ng-template #stackblitzTpl>
      {{ 'app.demo.stackblitz' | i18n }}
      (
      <a (click)="openOnlineIDE('StackBlitz', true)">{{ 'app.demo.code-sandbox-cli' | i18n }}</a>
      )
    </ng-template>
    <nz-icon
      nz-tooltip
      [nzTooltipTitle]="'app.demo.copy' | i18n"
      (click)="onCopy(item.code)"
      [nzType]="copied ? 'check' : 'snippets'"
      class="code-box-code-icon"
      [class.ant-tooltip-open]="copied"
    />
    <i nz-tooltip [nzTooltipTitle]="expand ? 'Hide Code' : 'Show Code'" class="code-expand-icon">
      <img
        alt="expand code"
        [src]="
          theme === 'dark'
            ? 'https://gw.alipayobjects.com/zos/antfincdn/btT3qDZn1U/wSAkBuJFbdxsosKKpqyq.svg'
            : 'https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg'
        "
        [class.code-expand-icon-hide]="expand"
        [class.code-expand-icon-show]="!expand"
        (click)="handle()"
      />
      <img
        alt="expand code"
        [src]="
          theme === 'dark'
            ? 'https://gw.alipayobjects.com/zos/antfincdn/CjZPwcKUG3/OpROPHYqWmrMDBFMZtKF.svg'
            : 'https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg'
        "
        [class.code-expand-icon-show]="expand"
        [class.code-expand-icon-hide]="!expand"
        (click)="handle()"
      />
    </i>
  </div>
</section>
<section class="highlight-wrapper" [class.highlight-wrapper-expand]="expand">
  <div class="highlight">
    <pre class="hljs language-ts"><code>{{item.code}}</code></pre>
  </div>
</section>
